<template>
	<el-card class="box-card">
		<flexbox justify="space-between" slot="header">
			<span style="font-size: 16px; font-weight: bold">保障计划</span>
		</flexbox>
		<el-form label-width="98px" ref="modelForm">
			<template v-if="type == 'person'">
				<el-form-item label="选择计划" required>
					<el-select
						v-model="activeVersion"
						size="mini"
						filterable
						allow-create
						default-first-option
						class="field"
						placeholder="请选择计划"
						style="width: 100%"
					>
						<el-option
							v-for="idType in versionOptions"
							:key="idType.text"
							:value="idType.text"
							:label="idType.text"
						/>
					</el-select>
				</el-form-item>

				<el-form-item label="服务类型" required>
					<el-select
						v-model="jobValue"
						size="mini"
						filterable
						allow-create
						default-first-option
						class="field"
						placeholder="请选择服务类型"
						style="width: 100%"
					>
						<el-option
							v-for="idType in jobOptions"
							:key="idType.text"
							:value="idType.text"
							:label="idType.text"
						/>
					</el-select>
				</el-form-item>
				<el-form-item
					label="是否选择附加家政人员第三者责任"
					label-width="240px"
					required
				>
					<el-select
						v-model="extraValue"
						size="mini"
						filterable
						allow-create
						default-first-option
						class="field"
						placeholder="请选择"
						style="width: 100%"
					>
						<el-option
							v-for="idType in extraOptions"
							:key="idType.value"
							:value="idType.value"
							:label="idType.text"
						/>
					</el-select>
				</el-form-item>
			</template>

			<el-form-item label="保障期间" required>
				<el-select
					v-model="periodValue"
					size="mini"
					filterable
					allow-create
					default-first-option
					class="field"
					placeholder="请选择服务类型"
					style="width: 100%"
				>
					<el-option
						v-for="idType in periodOptions"
						:key="idType.value"
						:value="idType.value"
						:label="idType.name"
					/>
				</el-select>
			</el-form-item>

			<el-form-item label="生效起始日" required>
				<el-date-picker
					v-model="startTime"
					size="mini"
					placeholder="请选择开始时间"
					type="date"
					value-format="yyyy-MM-dd"
					style="width: 100%"
				/>
				<span class="append-fix">00:00:00</span>
			</el-form-item>
			<el-form-item label="生效终止日" required>
				<el-input size="mini" readonly :value="endTime" />
				<span class="append-fix">23:59:59</span>
			</el-form-item>
		</el-form>
	</el-card>
</template>

<script>
const productId = 113305
import { guarantee } from '@/api'
import _ from 'lodash'
import * as REGEXP from '@/const/REGEXP'
import moment from 'moment'
var urlSearchParams = new URLSearchParams(location.search)
var UrlSearch = {}
for (let [key, value] of urlSearchParams.entries()) {
	UrlSearch[key] = value
}
export default {
	props: {
		type: String
	},
	data() {
		const startTime = moment().add(1, 'days').format('yyyy-MM-DD')

		return {
			plans: [],
			activeVersion: '精英版',
			versionOptions: [
				{ text: '精英版' },
				{ text: '尊贵版' },
				{ text: '至尊版' }
			],
			jobValue: '保洁、做饭师、收纳师、月嫂',
			jobOptions: [
				{ text: '保洁、做饭师、收纳师、月嫂' },
				{ text: '维修工、搬运工、门岗人员' }
			],
			extraValue: '基础',
			extraOptions: [
				{ text: '是', value: '基础+可选' },
				{ text: '否', value: '基础' }
			],
			periodValue: '月',
			periodOptions: [
				// { name: '按天', value: '日' },
				{ name: '按月', value: '月' },
				{ name: '按年', value: '年' }
			],

			startTime
		}
	},
	computed: {
		// 使用当前选择的'期限、版本、工种'，确定其计划
		active_plan() {
			const { plans, periodValue, activeVersion, jobValue, extraValue } = this
			var result = plans.findIndex((plan) => {
				const [period, version, job, extra] = plan.name.split('-')
				return (
					(periodValue == '' || periodValue == period) &&
					(activeVersion == '' || activeVersion == version) &&
					(jobValue == '' || jobValue == job) &&
					(extraValue == '' || extraValue == extra)
				)
			})
			console.log(plans[result])
			return plans[result]
		},
		endTime() {
			let startMoment = moment(this.startTime)
			if (this.periodValue == '月') {
				startMoment = startMoment.add(1, 'months')
			} else if (this.periodValue == '年') {
				startMoment = startMoment.add(1, 'years')
			}
			return startMoment.subtract(1, 'days').format('yyyy-MM-DD')
		}
	},
	mounted() {
		this.setPlans()
	},
	methods: {
		// 获取计划
		setPlans() {
			guarantee({
				productId
			}).then(({ data }) => {
				this.plans = data
			})
		},

		getValue() {
			const { startTime, endTime, active_plan, periodValue } = this
			return {
				startTime,
				endTime,
				period: periodValue,
				activePlan: active_plan
			}
		}
	},
	components: {}
}
</script>

<style lang="scss" scoped="scoped">
.append-fix {
	position: absolute;
	right: 9px;
	color: #666;
	top: 50%;
	transform: translateY(-50%);
}
</style>
